SherbyNet - /page/wikibook/entry.mu

Micron Document

<!DOCTYPE html>

<title>Programmation web</title>

</head>

<h1 id="firstHeading" class="firstHeading mw-first-heading"><span class="mw-page-title-main">Programmation web</span></h1>

</header>

</div>

<p>La <b>programmation web</b> est la <a href="Programmation_informatique" title="Programmation informatique">programmation informatique</a> qui permet de créer et d'éditer des <a href="Sites_web" class="mw-redirect" title="Sites web">sites web</a>. Elle permet la création d'<a href="Application_(informatique)" title="Application (informatique)">applications</a> destinées à être déployées sur <a href="Internet" title="Internet">Internet</a> ou en <a href="Intranet" title="Intranet">Intranet</a>. Ces <a href="Application_web" title="Application web">applications web</a> sont constituées de pages web pouvant prendre différentes formes telles que :

</p>

<ul><li>les « <a href="Page_web_statique" title="Page web statique">pages web statiques</a> » : il s'agit de fichiers ; leur contenu n'est pas influencé par l'internaute qui le demande et il évolue seulement avec une intervention manuelle de son <a href="Code_source" title="Code source">code source</a>. Une fois une page statique chargée sur le <a href="Navigateur_web" title="Navigateur web">navigateur web</a> du client, des scripts <a href="JavaScript" title="JavaScript">JavaScript</a> peuvent permettre de faire évoluer la page via des appels côté <a href="Serveur_informatique" title="Serveur informatique">serveur</a> par exemple (<a href="#Technique_Ajax_:_communication_sans_rechargement_entre_«_serveur_»_et_«_client_»">Ajax</a>).</li>

<li>les « <a href="Page_web_dynamique" title="Page web dynamique">pages web dynamiques</a> » : leur contenu — ou « réponse » — est dynamiquement généré côté serveur au moment de la demande ; il évolue sans que le code du site web ne soit modifié manuellement. Ce contenu est généré selon l'interaction des <a href="Utilisateur_(informatique)" title="Utilisateur (informatique)">utilisateurs</a> (paramètres d'<a href="Uniform_Resource_Locator" title="Uniform Resource Locator">URL</a>, saisi de <a href="Formulaire_HTML" title="Formulaire HTML">formulaires</a>, <abbr class="abbr" title="et cetera">etc.</abbr>) et selon les données chargées par calcul au moment de l'appel (pour un <a href="Blog" title="Blog">blog</a>, par exemple : les articles du jour, contenu de widgets, <abbr class="abbr" title="et cetera">etc.</abbr>). C'est le cas de la très large majorité des sites web et blogs entre le début des années 2000 et jusqu'au début des années 2020. Parmi les pages dynamiques, on peut également citer les pages — ou « endpoints » — <a href="Interface_de_programmation" title="Interface de programmation">API</a> : il s'agit d'une forme de pages dynamiques qui n'ont pas vocation à être affichées sur le navigateur du client mais de retourner de la donnée (<a href="Extensible_Markup_Language" title="Extensible Markup Language">XML</a>, <a href="JavaScript_Object_Notation" title="JavaScript Object Notation">JSON</a>, <abbr class="abbr" title="et cetera">etc.</abbr>) ou permettre l'envoi d'informations côté serveur (<a href="Authentification" title="Authentification">authentification</a>, insertion de données, <abbr class="abbr" title="et cetera">etc.</abbr>).</li></ul>

<p>Pour un <a href="Internaute" title="Internaute">internaute</a> qui fait appel à une URL, la page web correspondante, qu'elle soit statique ou dynamique, consiste en du code « côté client » (<a href="Hypertext_Markup_Language" title="Hypertext Markup Language">HTML</a>, <a href="Feuilles_de_style_en_cascade" title="Feuilles de style en cascade">CSS</a>, Javascript, <abbr class="abbr" title="et cetera">etc.</abbr>), qui est interprété par son navigateur (<a href="Google_Chrome" title="Google Chrome">Chrome</a>, <a href="Mozilla_Firefox" title="Mozilla Firefox">Firefox</a>, <a href="Safari_(navigateur_web)" title="Safari (navigateur web)">Safari</a>, <a href="Microsoft_Edge" title="Microsoft Edge">Edge</a>, <a href="Brave_(navigateur_web)" title="Brave (navigateur web)">Brave</a>, <a href="Opera" title="Opera">Opera</a>, <abbr class="abbr" title="et cetera">etc.</abbr>), produisant une <a href="Interface_utilisateur" title="Interface utilisateur">interface utilisateur</a>. Ce code, renvoyé par un <a href="Serveur_web" title="Serveur web">serveur web</a>, peut ou non avoir été généré par du calcul « côté serveur », via des langages de programmation particuliers (<a href="Structured_Query_Language" title="Structured Query Language">SQL</a>, <a href="MySQL" title="MySQL">MySQL</a>, <a href="PHP" title="PHP">PHP</a>, <abbr class="abbr" title="et cetera">etc.</abbr>), pouvant faire appel à des <a href="Base_de_donn%C3%A9es" title="Base de données">bases de données</a>, des API, <abbr class="abbr" title="et cetera">etc.</abbr>

</p><p>Il existe différentes techniques et différents <a href="Langage_de_programmation" title="Langage de programmation">langages</a> permettant de construire des sites web par l'intermédiaire de serveurs web, que l'on peut classer selon deux principes : des langages de programmation côté <a href="Client_HTTP" title="Client HTTP">client</a>, ou côté <a href="Serveur_HTTP" class="mw-redirect" title="Serveur HTTP">serveur</a>. Cette distinction est faite pour séparer les langages « côté serveur » dont le code est exécuté sur le serveur web avant d'arriver sur le navigateur de l'utilisateur, des langages « côté client » dont l'exécution ne nécessite pas de calcul sur le serveur web mais, seulement après le téléchargement de la page, une interprétation par le navigateur de l'utilisateur.

</p>

<div class="mw-heading mw-heading2"><h2 id="Programmation_web_côté_client"><span id="Programmation_web_c.C3.B4t.C3.A9_client"></span>Programmation web côté client</h2></div>

<div class="mw-heading mw-heading3"><h3 id="Principe">Principe</h3></div>

<p>Lorsqu'un visiteur demande une page en tapant une adresse ou <a href="Uniform_Resource_Locator" title="Uniform Resource Locator">URL</a>, le serveur web lui renvoie le contenu de la page demandée, le plus souvent en <a href="Hypertext_Markup_Language" title="Hypertext Markup Language">HTML</a>, <a href="JavaScript" title="JavaScript">JavaScript</a> ou <a href="Extensible_Markup_Language" title="Extensible Markup Language">XML</a>.

</p><p>C'est ensuite le <a href="Navigateur_web" title="Navigateur web">navigateur web</a> qui interprète le contenu retourné, en utilisant ou non des <a href="Plugin" title="Plugin">plugins</a> qui interprètent certains objets.

</p><p>La programmation « côté client » (ou <a href="D%C3%A9veloppement_web_frontal" title="Développement web frontal">développement web frontal</a>) consiste à produire du code (HTML, <a href="Feuilles_de_style_en_cascade" title="Feuilles de style en cascade">CSS</a>, Javascript, <abbr class="abbr" title="et cetera">etc.</abbr>) qui sera interprété par un navigateur web (ou une fenêtre, pour les logiciels de bureau ou <a href="Application_mobile" title="Application mobile">applications mobiles</a>) et produira un rendu visuel : une interface utilisateur (<a href="Interface_utilisateur" title="Interface utilisateur">UI</a>) ; et dont certains éléments permettront une navigation, des liens avec les autres pages (<a href="Exp%C3%A9rience_utilisateur" title="Expérience utilisateur">UX</a>).

</p>

<div class="mw-heading mw-heading3"><h3 id="Les_langages_de_balisage">Les langages de balisage</h3></div>

<div class="mw-heading mw-heading4"><h4 id="Langage_HTML_ou_XHTML">Langage HTML ou XHTML</h4></div>

<p>Toute <a href="Page_web" title="Page web">page web</a> comprend une base de langage <a href="Hypertext_Markup_Language" title="Hypertext Markup Language">HTML</a> ou <a href="Extensible_Hypertext_Markup_Language" title="Extensible Hypertext Markup Language">XHTML</a>. Il s'agit d'un <a href="Langage_de_balisage" title="Langage de balisage">langage de balisage</a> qui définit essentiellement la structure de la page web (titres, tableaux, paragraphes, listes, etc.).

</p><p>Initialement, c'est un langage qui permet de créer des <a href="Hyperlien" title="Hyperlien">hyperliens</a>, à savoir des liens d'un document à un autre ou d'un endroit d'un document à un autre endroit du même document (<a href="Identificateur_de_fragment" title="Identificateur de fragment">identificateur de fragment</a>).

</p><p>Ce langage ne définit, au départ, que la structure de la page ; mais, très vite, se sont ajoutées des balises (ou <a href="Langage_de_balisage" title="Langage de balisage">tags</a>) qui spécifient les caractéristiques de la page web (hiérarchisation du contenu, attributs donnés aux balises).

</p><p>Depuis sa version 4, le langage HTML s'accompagne de <a href="Feuilles_de_style_en_cascade" title="Feuilles de style en cascade">feuilles de style en cascade</a> (CSS) qui sont des styles se chargeant de la mise en forme et de l'animation de la page.

</p><p>Le XHTML est une évolution du HTML basée sur <a href="Extensible_Markup_Language" title="Extensible Markup Language">XML</a>.

</p>

<div class="mw-heading mw-heading5"><h5 id="Insertion_d'objets_en_HTML"><span id="Insertion_d.27objets_en_HTML"></span>Insertion d'objets en HTML</h5></div>

<p>Pour rendre une page web plus dynamique en HTML, il est possible d'y insérer des objets, grâce aux tags <code><object></code>, <code><img></code>, <code><applet></code> ou <code><script></code> par exemple.

</p>

<div class="mw-heading mw-heading6"><h6 id="Images">Images</h6></div>

<p>Un premier type d'objet sont les <a href="Image_num%C3%A9rique" title="Image numérique">images</a> qu'on intègre dans la page web. Les images sont généralement statiques, sauf les <a href="Graphics_Interchange_Format" title="Graphics Interchange Format">gifs animés</a>.

</p>

<dl><dt>Portabilité</dt>

<dd>Pour autant qu'on se limite aux <a href="Image_num%C3%A9rique#Formats_d'image" title="Image numérique">formats de fichiers</a> standards pour le web (.gif, .jpg ou .<a href="Joint_Photographic_Experts_Group" title="Joint Photographic Experts Group">jpeg</a> et .<a href="Portable_Network_Graphics" title="Portable Network Graphics">png</a>), les images sont sans doute un des objets les plus <a href="Logiciel_multiplateforme" title="Logiciel multiplateforme">multi-plateforme</a> du web : la majorité des navigateurs web savent afficher des images.</dd></dl>

<dl><dt>Mise en place</dt>

<dd>Les images numériques deviennent un média très « grand public » et sont assez aisées à implémenter dans un site web grâce à la balise <code><img></code>.</dd></dl>

<div class="mw-heading mw-heading6"><h6 id="Multimédia"><span id="Multim.C3.A9dia"></span>Multimédia</h6></div>

<p>L'intégration de documents <a href="Multim%C3%A9dia" title="Multimédia">multimédia</a> (<a href="Son_(physique)" title="Son (physique)">son</a> ou <a href="Vid%C3%A9o" title="Vidéo">vidéo</a>).

</p>

<dl><dt>Mise en place</dt>

<dd>Une fois un fichier son ou vidéo produit, le placement dans la page HTML peut se faire, en <a href="HTML5" title="HTML5">HTML5</a>, via des balises <code><audio></code> ou <code><video></code>.</dd></dl>

<dl><dt>Performance</dt>

<dd>Les fichiers multimédia étant souvent lourds ils sont plus longs à télécharger (que du texte, par exemple). Ils peuvent réduire les performances (temps de chargement) de la page web. Cependant il existe des techniques permettant d'améliorer le temps de chargement, par exemple : la lecture en flux (<a href="Streaming" title="Streaming">streaming</a>).</dd></dl>

<div class="mw-heading mw-heading6"><h6 id="Jusqu'au_début_des_années_2010"><span id="Jusqu.27au_d.C3.A9but_des_ann.C3.A9es_2010"></span>Jusqu'au début des années 2010</h6></div>

<p><b>Animation Flash</b> (obsolète)

</p><p><a href="Adobe_Flash" title="Adobe Flash">Flash</a> (d'<a href="Adobe_(entreprise)" title="Adobe (entreprise)">Adobe Systems</a> - <a href="Macromedia" title="Macromedia">Macromedia</a>) est un programme qui permet de créer des animations dans un <a href="Format_propri%C3%A9taire" title="Format propriétaire">format</a> <a href="Image_vectorielle" title="Image vectorielle">vectoriel</a> <a href="Logiciel_propri%C3%A9taire" title="Logiciel propriétaire">propriétaire</a> relativement léger. Le programme génère un fichier de travail avec l'extension .fla qui sera <a href="Compilateur" title="Compilateur">compilé</a> en un fichier avec l'extension .swf. <a href="Swift_(langage_d'Apple)" title="Swift (langage d'Apple)">Swift</a> était un autre programme générant des fichiers swf hors de la sphère <a href="Macromedia" title="Macromedia">Macromedia</a>.

</p><p>Dans une page web, une animation Flash (fichier avec extension .swf) peut être intégrée comme partie de la page (une publicité, un menu, ...) ou l'ensemble de la page pouvant être en flash mais avec la présence d'un <a href="Squelette_d'un_site_web" title="Squelette d'un site web">squelette</a> HTML.

</p><p>Flash permet de créer des animations de qualité, offrant une certaine interaction avec l'utilisateur grâce au langage de programmation <a href="ActionScript" title="ActionScript">ActionScript</a> (dérivé de <a href="ECMAScript" title="ECMAScript">ECMAScript</a> comme <a href="JavaScript" title="JavaScript">JavaScript</a>). Les dernières versions de Flash permettent également l'interfaçage avec une base de données.

</p><p><a href="Adobe_Flash_Player" title="Adobe Flash Player">Adobe Flash Player</a> est officiellement abandonné en <time class="nowrap" datetime="2020-12" data-sort-value="2020-12">décembre 2020</time><sup id="cite_ref-1" class="reference"><a href="#cite_note-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup>, ainsi que son support dans les navigateurs web.

</p><p><b>Applet Java (appliquette)</b> (obsolète)

</p><p>Il était également possible de créer des petits programmes avec interface dans un <a href="Langage_de_programmation" title="Langage de programmation">langage de programmation</a> comme <a href="Java_(langage)" title="Java (langage)">Java</a>. Ces petits programme sont appelés « <a href="Applet" title="Applet">Applets</a> » ou « appliquettes ». Ils sont complètement autonomes mais éventuellement paramétrables et s'intègrent dans une page web. Ils étaient téléchargés avec la page web et exécutés par l'ordinateur client.

</p><p>Le code est indépendant de la plate forme grâce à la <a href="Machine_virtuelle_Java" title="Machine virtuelle Java">machine virtuelle Java</a>.

</p><p><b>ActiveX</b> (obsolète)

</p><p>Les ActiveX sont une solution de création d'applications développée par <a href="Microsoft" title="Microsoft">Microsoft</a>. Les principes de fonctionnement sont très semblables au fonctionnement des applets. Voir aussi <a href="Component_Object_Model" title="Component Object Model">Component Object Model</a>.

</p>

<div class="mw-heading mw-heading5"><h5 id="Limites_du_HTML">Limites du HTML</h5></div>

<p>Une page web créée en <a href="Hypertext_Markup_Language" title="Hypertext Markup Language">HTML</a> est totalement statique et n'offre qu'une faible possibilité d'interaction avec le visiteur. Chaque page doit être créée au préalable et manuellement rafraîchie.

</p><p>Le langage HTML est multi-plateformes. Tous les navigateurs web reconnaissent le langage HTML de base, seuls certaines balises ou attributs sont propres à certains navigateurs. Les CSS, même s'ils sont standardisés par le <a href="World_Wide_Web_Consortium" title="World Wide Web Consortium">W3C</a>, ne sont pas toujours reconnus de la même manière par les différents navigateurs web.

</p><p>Les <a href="Composants_web" title="Composants web">composants web</a> permettent aux développeurs de créer des balises HTML personnalisées et réutilisables.

</p>

<div class="mw-heading mw-heading5"><h5 id="Mise_en_place">Mise en place</h5></div>

<p>Le langage HTML a l'avantage d'être facile à mettre en place et ne demande pas de compétences techniques très poussées. Ses pages sont d'un traitement très léger, donc rapide côté serveur.

</p>

<div class="mw-heading mw-heading4"><h4 id="XML_(eXtended_Markup_Language)"><span id="XML_.28eXtended_Markup_Language.29"></span>XML (<i>eXtended Markup Language</i>)</h4></div>

<p>Le <a href="Langage_de_balisage" title="Langage de balisage">langage de balisage</a> <a href="Extensible_Markup_Language" title="Extensible Markup Language">XML</a> peut également servir de base à une page web. Le fichier XML contiendra le contenu de la page web.

</p><p>Ce fichier peut être lié à un fichier <a href="XSLT" class="mw-redirect" title="XSLT">XSL</a> (Feuilles de style XML) qui mettra en forme les données du fichier XML.

</p><p>La plupart du temps, la page web ne sera pas basée sur un fichier XML natif mais celui-ci sera généré dynamiquement par un des langages de programmation web ci-dessous.

</p>

<div class="mw-heading mw-heading3"><h3 id="Langages_de_mise_en_forme_(CSS)"><span id="Langages_de_mise_en_forme_.28CSS.29"></span>Langages de mise en forme (CSS)</h3></div><p>

Le <a href="Feuilles_de_style_en_cascade" title="Feuilles de style en cascade">CSS (cascading style sheets, feuilles de style en cascade)</a> est un langage de programmation permettant la mise en forme d'une page web. L'HTML et le CSS sont complémentaires. </p>

<div class="mw-heading mw-heading3"><h3 id="Langages_de_script">Langages de script</h3></div>

<p>La programmation côté client utilise des langages de scripts. À la différence des langages de programmation côté serveur, ces langages ne sont pas compilés. Ils sont interprétés par le navigateur web du visiteur.

</p><p>Les <a href="Langage_de_script" title="Langage de script">langages de script</a> sont utilisés au départ dans le cas de validation de formulaires (champs obligatoires, petits calculs, ...) et dans la création d'animations sur le navigateur de l'utilisateur (menus déroulants, rafraîchissement du contenu sans rechargement de la page, …). Ils permettent toutefois, aujourd'hui, de faire beaucoup plus, tels que la création de jeux vidéo (API Canvas), la création d’environnements sonores (API Web Audio), la communication en temps réel (API RTC), etc.

</p><p>Dès le milieu des années 2010, la programmation Script est devenue très courante pour le développement d'applications web complètes avec l'arrivée de plateformes logicielles et de <a href="Framework_(logiciel)" title="Framework (logiciel)">frameworks</a> <a href="Open_source" title="Open source">open-source</a> basés sur <a href="JavaScript" title="JavaScript">JavaScript</a>, très documentés et largement recommandées par la communauté des développeurs, tels que le programme <a href="Node.js" title="Node.js">Node.js</a>, mais également les frameworks et librairies <a href="Vue.js" title="Vue.js">Vue.js</a> (indépendant), <a href="React" title="React">ReactJS</a> (<a href="Facebook" title="Facebook">Facebook</a>) ou encore <a href="AngularJS" title="AngularJS">AngularJS</a> (Google).

</p><p>Il existe historiquement plusieurs langages de script :

</p>

<ul><li><b>JavaScript</b>, qui est compatible sur tous les navigateurs. Il se base sur le langage normalisé <a href="ECMAScript" title="ECMAScript">ECMAScript</a>.</li>

<li>Au début des années 2000, les langages suivants étaient parfois utilisés :

<ul><li>le <b><a href="JScript" title="JScript">JScript</a></b>, fort proche de JavaScript en est simplement une adaptation par <a href="Microsoft" title="Microsoft">Microsoft</a>.</li>

<li>le <b><a href="VBScript" title="VBScript">VBScript</a></b> est le langage de script développé par Microsoft sur la base de <a href="Visual_Basic" title="Visual Basic">Visual Basic</a>. Ce langage n'est interprété que par les navigateurs basés sur ceux développés par Microsoft (soit <a href="Internet_Explorer" title="Internet Explorer">Internet Explorer</a> et <a href="Maxthon" title="Maxthon">Maxthon</a>). Il est donc peu utilisé sur l'Internet, mais utilisé parfois sur des intranets.</li>

<li>le <b><a href="HTML_dynamique" title="HTML dynamique">DHTML</a>,</b> qui n'est pas un langage de script mais simplement la combinaison, dans une page web, de JavaScript, de HTML 4 ou de <a href="Extensible_Hypertext_Markup_Language" title="Extensible Hypertext Markup Language">XHTML</a> et de <a href="Feuilles_de_style_en_cascade" title="Feuilles de style en cascade">CSS</a>.</li></ul></li></ul>

<div class="mw-heading mw-heading2"><h2 id="Programmation_web_côté_serveur"><span id="Programmation_web_c.C3.B4t.C3.A9_serveur"></span>Programmation web côté serveur</h2></div>

<div class="mw-heading mw-heading3"><h3 id="Principe_2">Principe</h3></div>

<p>Lorsqu'un visiteur demande le chargement d'une <a href="Uniform_Resource_Locator" title="Uniform Resource Locator">URL</a> sur son navigateur (ce qui constitue une « requête »), un appel (le plus souvent via <a href="Hypertext_Transfer_Protocol" title="Hypertext Transfer Protocol">HTTP</a> ou <a href="Hypertext_Transfer_Protocol_Secure" title="Hypertext Transfer Protocol Secure">HTTPS</a>) est effectué sur le <a href="Serveur_web" title="Serveur web">serveur web</a> qui héberge le site correspondant. Ce serveur web va ensuite identifier le ou les scripts — écrits dans un langage « côté serveur » — correspondant à cette URL, et demander leur exécution. L'exécution va alors résulter en un contenu HTML, qui sera ensuite expédié en « réponse » au visiteur, lisible par son navigateur.

</p><p>La programmation « côté serveur » consiste donc à produire du code dont l'exécution du calcul et de la <a href="R%C3%A9cup%C3%A9ration_de_donn%C3%A9es" title="Récupération de données">récupération de données</a> externes (<a href="Base_de_donn%C3%A9es" title="Base de données">bases de données</a>, <a href="Interface_de_programmation" title="Interface de programmation">API</a>, <abbr class="abbr" title="et cetera">etc.</abbr>), va résulter en un contenu qui sera envoyé « côté client ».

</p>

<div class="mw-heading mw-heading3"><h3 id="Différents_langages_et_techniques"><span id="Diff.C3.A9rents_langages_et_techniques"></span>Différents langages et techniques</h3></div>

<div class="mw-heading mw-heading4"><h4 id="Javascript">Javascript</h4></div>

<p>Il est possible de mettre en place un serveur web en utilisant le programme <a href="Node.js" title="Node.js">Node.js</a>, exposant des URL, via notamment <a href="Express.js" title="Express.js">Express.js</a>, à un projet de code développé en Javascript.

</p>

<p>PHP (<i>PHP: Hypertext Preprocessor</i>) est un langage de script interprété côté serveur. Le code PHP est lu par le serveur et interprété pour produire une page HTML (ou d'autres types de fichier comme des images ou des documents <a href="PDF" class="mw-redirect" title="PDF">PDF</a>) à chaque fois que la page sera demandée. Ce langage a été créé initialement dans le cadre des logiciels <a href="Open_Source" class="mw-redirect" title="Open Source">Open Source</a>. De nombreux développeurs ont ensuite profité de l'Open Source pour développer de nombreux modules prêts à l'usage et paramétrables à volonté.

</p><p>Les modules serveurs de PHP sont implémentés sur les serveurs <a href="Apache_Software_Foundation" title="Apache Software Foundation">Apache</a> et <a href="Unix" title="Unix">Unix</a> mais PHP peut être implémenté sur d'autres plates-formes via des <a href="Common_Gateway_Interface" title="Common Gateway Interface">CGI</a>.

</p><p>La syntaxe, relativement simple, part d'une base de <a href="C_(langage)" title="C (langage)">C</a>.

</p><p>Frameworks notables : <a href="Symfony" title="Symfony">Symfony</a>, <a href="Laravel" title="Laravel">Laravel</a>.

</p>

<div class="mw-heading mw-heading4"><h4 id="Python">Python</h4></div>

<p><a href="Django_(framework)" title="Django (framework)">Django</a> : Framework open-source largement répandu pour construire et déployer une application côté serveur en <a href="Python_(langage)" title="Python (langage)">Python</a>.

</p>

<p><a href="Ruby_on_Rails" title="Ruby on Rails">Ruby on Rails</a> : Framework open-source largement répandu pour construire et déployer une application côté serveur en <a href="Ruby" title="Ruby">Ruby</a>.

</p>

<ul><li><b><a href="JavaServer_Pages" class="mw-redirect" title="JavaServer Pages">JSP</a></b> (<i>JavaServer Pages</i>) : technique développée par <a href="Sun_Microsystems" title="Sun Microsystems">Sun Microsystems</a> dans le but de créer des pages dynamiques avec le langage Java. Les JSP permettent d'ajouter du code Java dans la page HTML qui sera interprété par le serveur. On peut distinguer trois ensembles d'instructions JSP :

<ul><li>Les instructions de programmation permettent d’insérer des bouts de code Java directement dans la page web, et donnent accès à une grande partie de la bibliothèque de programmation de la version standard de Java (composants <a href="JavaBeans" title="JavaBeans">JavaBeans</a>, accès aux bases de données via <a href="JDBC" class="mw-redirect" title="JDBC">JDBC</a> etc.)</li>

<li>Les directives qui permettent de spécifier certaines propriétés de la page, l’inclusion du contenu d’autres fichiers et l’utilisation d’autres classes et bibliothèques de balises personnalisées.</li>

<li>Les actions permettent essentiellement d’utiliser des composants JavaBeans existants.</li>

<li><b>Portabilité</b> : très grande portabilité grâce à Java : serveurs <a href="Apache_HTTP_Server" title="Apache HTTP Server">Apache</a> mais aussi IIS, etc.</li>

<li><b>Mise en place</b> : utilisation de Java comme langage de programmation.</li>

<li><b>Performance</b> : très variable en fonction de l'implémentation utilisée.</li>

<li><b>Utilisation</b> : tout type de fonctionnalités.</li></ul></li></ul>

<ul><li><b><a href="Servlets" class="mw-redirect" title="Servlets">Servlets</a></b> : le nom vient d'une analogie possible à faire avec les applets. Il s'agit donc de programmes créés en Java et tournant sur le serveur web. L'exécution du programme génère les pages web renvoyées au client.

<ul><li><b>Langages utilisés</b> : Java.</li>

<li><b>Portabilité</b> : Très grande portabilité grâce à Java : serveurs <a href="Apache_HTTP_Server" title="Apache HTTP Server">Apache</a> mais aussi IIS, etc.</li>

<li><b>Mise en place</b> : Utilisation de Java comme langage de programmation.</li>

<li><b>Performance</b> : Très variable en fonction de l'implémentation utilisée.</li>

<li><b>Utilisation</b> : Tout type de fonctionnalités.</li></ul></li></ul>

<p>Il est possible de développer un site web « côté serveur » en <a href="C%2B%2B" title="C++">C++</a>, notamment avec des frameworks tels que Wt <a href="https://en.wikipedia.org/wiki/Wt_(web_toolkit)" class="extiw external" title="en:Wt (web toolkit)"><span class="indicateur-langue" title="Article en anglais : « Wt (web toolkit) »">(en)</span></a>, ou CppCMS <a href="https://en.wikipedia.org/wiki/CppCMS" class="extiw external" title="en:CppCMS"><span class="indicateur-langue" title="Article en anglais : « CppCMS »">(en)</span></a> par exemple.

</p>

<div class="mw-heading mw-heading4"><h4 id="Techniques_Microsoft">Techniques Microsoft</h4></div>

<ul><li><b><a href="Active_server_pages" class="mw-redirect" title="Active server pages">ASP</a></b> (<i>Active Server Pages</i>) : technique développée par Microsoft à partir de 1996 dans le but de créer des pages dynamiques. ASP permet d'ajouter du code dans la page HTML qui sera interprété par le serveur. La partie <a href="ActiveX_Data_Object" class="mw-redirect" title="ActiveX Data Object">ADO</a> (<i>ActiveX Data Object</i>) de ASP permet de se connecter à une base de données.

<ul><li><b>Langages utilisés</b> : <a href="VBScript" title="VBScript">VBScript</a> (langage par défaut) ou <a href="JScript" title="JScript">JScript</a>.</li>

<li><b>Portabilité</b> : La technique est implémentée sur les serveurs web de Microsoft (<a href="Internet_Information_Services" title="Internet Information Services">IIS</a> et PWS <a href="https://en.wikipedia.org/wiki/Microsoft_Personal_Web_Server" class="extiw external" title="en:Microsoft Personal Web Server"><span class="indicateur-langue" title="Article en anglais : « Microsoft Personal Web Server »">(en)</span></a>).</li>

<li><b>Mise en place</b> : Utilisation de langage de Script donc d'accès relativement aisé (mais se complexifie vite).</li>

<li><b>Performance</b> : Bonne performance surtout si l'on utilise du code compilé (<a href="Dynamic_Link_Library" title="Dynamic Link Library">DLL</a>).</li>

<li><b>Utilisation</b> : Tout site web dynamique peut être créé en ASP.</li>

<li><b>Dernière version</b> : ASP 3.0.</li></ul></li></ul>

<ul><li><b><a href="ASP.NET" title="ASP.NET">ASP.NET</a></b> : technique développée par Microsoft sur base du <a href="Microsoft_.NET" title="Microsoft .NET">Framework.Net</a>. L'évolution est importante par rapport à ASP et les possibilités deviennent quasi infinies. ASP.NET a le gros avantage, par rapport à d'autres techniques, de bien séparer le contenu de la page web, sa mise en forme et la programmation des aspects dynamiques (travail en <i><span class="lang-en" lang="en">Code Behind</span></i><sup id="cite_ref-2" class="reference"><a href="#cite_note-2"><span class="cite-bracket">[</span>2<span class="cite-bracket">]</span></a></sup>).

<ul><li><b>Langages utilisés</b> : <a href="C_sharp" class="mw-redirect" title="C sharp">C#</a>, <a href="Visual_Basic_.NET" title="Visual Basic .NET">VB.Net</a>, <a href="JScript_.NET" title="JScript .NET">JScript .NET</a>... et de nombreux autres langages partageant le <a href="Common_Language_Runtime" title="Common Language Runtime">Common Language Runtime</a> du Framework .NET.</li>

<li><b>Portabilité</b> : la technique est implémentée sur les serveurs web de Microsoft (IIS 2003).</li>

<li><b>Mise en place</b> : Utilisation de langage de programmation et nécessite donc de bonnes bases en programmation mais le langage importe peu (plusieurs langages possibles). Avec la version 2 (ASP.NET 2.0) et un outil de développement comme <a href="Visual_Studio" class="mw-redirect" title="Visual Studio">Visual Studio</a>, le développement d'applications peut déjà aller très loin sans programmation : beaucoup de contrôles sont gérés par leurs propriétés.</li>

<li><b>Performance</b> : excellentes performances car tout le code est compilé (soit précompilé, soit <a href="Compilation_%C3%A0_la_vol%C3%A9e" title="Compilation à la volée">compilé à la volée</a>).</li>

<li><b>Utilisation</b> : Tout type d'application web peut être créé avec ASP.NET.</li></ul></li></ul>

<div class="mw-heading mw-heading4"><h4 id="ColdFusion">ColdFusion</h4></div>

<p><a href="ColdFusion" title="ColdFusion">ColdFusion</a> est une technique de création de pages dynamiques développée par <a href="Macromedia" title="Macromedia">Macromedia</a>. Les pages d’application sont des pages web contenant des instructions de programmation écrite à l’aide d’un langage propriétaire, le CFML (<span class="lang-en" lang="en">ColdFusion Markup Language</span>). Le CFML est un langage simple basé sur des balises dont la syntaxe est similaire à celles du langage HTML mais interprétées par le serveur.

</p>

<div class="mw-heading mw-heading3"><h3 id="Base_de_données"><span id="Base_de_donn.C3.A9es"></span>Base de données</h3></div>

<p>Chacun de ces langages, pour permettre de construire des pages dont le contenu et les données sont construits dynamiquement en fonction de l'usage des utilisateurs ou d'autres paramètres externes, peut faire appel à une ou plusieurs <a href="Base_de_donn%C3%A9es" title="Base de données">bases de données</a>.

</p><p>Il en existe de nombreuses sortes : <a href="DBase" title="DBase">dBase</a>, filePro <a href="https://en.wikipedia.org/wiki/filePro" class="extiw external" title="en:filePro"><span class="indicateur-langue" title="Article en anglais : « filePro »">(en)</span></a>, <a href="Firebird_(base_de_donn%C3%A9es)" title="Firebird (base de données)">Firebird</a>, <a href="InterBase" title="InterBase">InterBase</a>, FrontBase <a href="https://en.wikipedia.org/wiki/FrontBase" class="extiw external" title="en:FrontBase"><span class="indicateur-langue" title="Article en anglais : « FrontBase »">(en)</span></a>, <a href="IBM_Db2" title="IBM Db2">IBM DB2</a>, <a href="Apache_Derby" title="Apache Derby">Cloudscape</a>, <a href="Informix" title="Informix">Informix</a>, <a href="Ingres_(base_de_donn%C3%A9es)" title="Ingres (base de données)">Ingres</a>, <a href="Open_Database_Connectivity" title="Open Database Connectivity">ODBC</a>, Enterprise Access<sup id="cite_ref-3" class="reference"><a href="#cite_note-3"><span class="cite-bracket">[</span>3<span class="cite-bracket">]</span></a></sup>, <a href="Microsoft_SQL_Server" title="Microsoft SQL Server">Microsoft SQL Server</a>, <a href="MySQL" title="MySQL">MySQL</a>, <a href="PostgreSQL" title="PostgreSQL">PostgreSQL</a>, <a href="SQLite" title="SQLite">SQLite</a>, SQLite3, SQLSRV<sup id="cite_ref-4" class="reference"><a href="#cite_note-4"><span class="cite-bracket">[</span>4<span class="cite-bracket">]</span></a></sup>, <a href="Sybase" title="Sybase">Sybase</a>, <a href="MariaDB" title="MariaDB">MariaDB</a>.

</p>

<div class="mw-heading mw-heading2"><h2 id="Technique_Ajax_:_communication_sans_rechargement_entre_«_serveur_»_et_«_client_»"><span id="Technique_Ajax_:_communication_sans_rechargement_entre_.C2.AB_serveur_.C2.BB_et_.C2.AB_client_.C2.BB"></span>Technique Ajax : communication sans rechargement entre « serveur » et « client »</h2></div>

<p><a href="Asynchronous_JavaScript_and_XML" class="mw-redirect" title="Asynchronous JavaScript and XML">AJAX</a> (<i>Asynchronous JavaScript And XML</i>) est une technique, avec ses avantages et inconvénients<sup id="cite_ref-5" class="reference"><a href="#cite_note-5"><span class="cite-bracket">[</span>5<span class="cite-bracket">]</span></a></sup>, qui combine plusieurs éléments :

</p>

<ul><li>du <a href="XHTML" class="mw-redirect" title="XHTML">XHTML</a> pour la structure de la page,</li>

<li>les <a href="Feuilles_de_style_en_cascade" title="Feuilles de style en cascade">CSS</a> pour la mise en forme de la page,</li>

<li>du <a href="JavaScript" title="JavaScript">JavaScript</a> et le <a href="Document_Object_Model" title="Document Object Model">DOM</a> pour la partie dynamique,</li>

<li><a href="Extensible_Markup_Language" title="Extensible Markup Language">XML</a>, <a href="XSLT" class="mw-redirect" title="XSLT">XSLT</a> et <a href="XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a> pour la manipulation des données (ou d'autres formats de fichiers de données).</li></ul>

<p>Cette technique permet d'effectuer une requête <a href="HTTP" class="mw-redirect" title="HTTP">HTTP</a> asynchrone (en parallèle) depuis un client au serveur web (effectuer une action, mettre à jour une information...). Le serveur renvoie la ressource demandée, pouvant contenir des informations ou du code permettant de mettre à jour la page HTML.

</p><p>Depuis le milieu des années 2010, avec l'arrivée de standards plus modernes du web, AJAX (dont la définition est associée à l'API XMLHttpRequest) est progressivement remplacé par de nouvelles fonctions telle que fetch() (API Fetch) qui repose sur un principe de « promesse » et d'appel d'une ressource réseau en tâche de fond<sup id="cite_ref-6" class="reference"><a href="#cite_note-6"><span class="cite-bracket">[</span>6<span class="cite-bracket">]</span></a></sup><sup class="reference cite_virgule">,</sup><sup id="cite_ref-7" class="reference"><a href="#cite_note-7"><span class="cite-bracket">[</span>7<span class="cite-bracket">]</span></a></sup>. Ou encore les communications serveur vers client comme le protocole Mercure<sup id="cite_ref-8" class="reference"><a href="#cite_note-8"><span class="cite-bracket">[</span>8<span class="cite-bracket">]</span></a></sup>. Le principe reste le même : faire communiquer, sans rechargement, une interface client avec une ressource sur un serveur.

</p>

<div class="mw-heading mw-heading2"><h2 id="Notes_et_références"><span id="Notes_et_r.C3.A9f.C3.A9rences"></span>Notes et références</h2></div>

<li id="cite_note-1"><span class="mw-cite-backlink"><a href="#cite_ref-1">↑</a> </span><span class="reference-text"><span class="ouvrage">« <a rel="nofollow" class="external text" href="https://support.google.com/chrome/a/answer/7084871?hl=fr"><cite style="font-style:normal;">Gérer Flash dans les navigateurs Chrome de vos utilisateurs - Aide Google Chrome Enterprise</cite></a> », sur <span class="italique">support.google.com</span> <small style="line-height:1em;">(consulté le <time class="nowrap" datetime="2020-02-19" data-sort-value="2020-02-19">19 février 2020</time>)</small></span></span>

</li>

<li id="cite_note-2"><span class="mw-cite-backlink"><a href="#cite_ref-2">↑</a> </span><span class="reference-text"><span class="ouvrage" id="Yu"><span class="ouvrage" id="Haiying_Yu"><abbr class="abbr indicateur-langue" title="Langue : anglais">(en)</abbr> Haiying Yu, « <a rel="nofollow" class="external text" href="https://learn.microsoft.com/en-us/troubleshoot/developer/webapps/aspnet/development/code-behind-model"><cite style="font-style:normal;" lang="en">ASP.NET Code-behind model overview - ASP.NET, Microsoft Learn</cite></a> », sur <span class="italique">Microsoft Learn</span> <small style="line-height:1em;">(consulté le <time class="nowrap" datetime="2025-02-25" data-sort-value="2025-02-25">25 février 2025</time>)</small></span></span>.</span>

</li>

<li id="cite_note-3"><span class="mw-cite-backlink"><a href="#cite_ref-3">↑</a> </span><span class="reference-text"><span class="ouvrage"><abbr class="abbr indicateur-langue" title="Langue : anglais">(en)</abbr> « <a rel="nofollow" class="external text" href="https://docs.actian.com/entaccess/3.0/index.html#page/GetStart/Introduction_to_Enterprise_Access.htm"><cite style="font-style:normal;" lang="en">Enterprise Access</cite></a> », sur <span class="italique">Actian</span> <small style="line-height:1em;">(consulté le <time class="nowrap" datetime="2025-02-25" data-sort-value="2025-02-25">25 février 2025</time>)</small></span>.</span>

</li>

<li id="cite_note-4"><span class="mw-cite-backlink"><a href="#cite_ref-4">↑</a> </span><span class="reference-text"><span class="ouvrage">« <a rel="nofollow" class="external text" href="https://www.php.net/manual/fr/book.sqlsrv.php"><cite style="font-style:normal;">PHP: SQLSRV - Manual</cite></a> », sur <span class="italique">php.net</span> <small style="line-height:1em;">(consulté le <time class="nowrap" datetime="2025-02-25" data-sort-value="2025-02-25">25 février 2025</time>)</small></span>.</span>

</li>

<li id="cite_note-5"><span class="mw-cite-backlink"><a href="#cite_ref-5">↑</a> </span><span class="reference-text"><a rel="nofollow" class="external text" href="http://www.video2brain.com/fr/videos-6725.htm">video2brain.com</a></span>

</li>

<li id="cite_note-6"><span class="mw-cite-backlink"><a href="#cite_ref-6">↑</a> </span><span class="reference-text"><span class="ouvrage"><abbr class="abbr indicateur-langue" title="Langue : anglais américain">(en-US)</abbr> « <a rel="nofollow" class="external text" href="https://developer.mozilla.org/fr/docs/Glossary/AJAX"><cite style="font-style:normal;" lang="en-us">AJAX - Glossaire | MDN</cite></a> », sur <span class="italique">developer.mozilla.org</span> <small style="line-height:1em;">(consulté le <time class="nowrap" datetime="2021-08-02" data-sort-value="2021-08-02">2 août 2021</time>)</small></span></span>

</li>

<li id="cite_note-7"><span class="mw-cite-backlink"><a href="#cite_ref-7">↑</a> </span><span class="reference-text"><span class="ouvrage"><abbr class="abbr indicateur-langue" title="Langue : anglais américain">(en-US)</abbr> « <a rel="nofollow" class="external text" href="https://developer.mozilla.org/fr/docs/Web/API/Fetch_API/Using_Fetch"><cite style="font-style:normal;" lang="en-us">Utiliser Fetch - Référence Web API | MDN</cite></a> », sur <span class="italique">developer.mozilla.org</span> <small style="line-height:1em;">(consulté le <time class="nowrap" datetime="2021-08-02" data-sort-value="2021-08-02">2 août 2021</time>)</small></span></span>

</li>

<li id="cite_note-8"><span class="mw-cite-backlink"><a href="#cite_ref-8">↑</a> </span><span class="reference-text"><span class="ouvrage">« <a rel="nofollow" class="external text" href="https://les-tilleuls.coop/blog/mercure-un-protocole-pour-pousser-des-mises-a-jour-vers-des-navigateurs-et-app-mobiles-en-temps-reel"><cite style="font-style:normal;">Mercure, un protocole pour pousser des mises à jour vers des navigateurs et app mobiles en temps réel</cite></a> », sur <span class="italique">Les-Tilleuls.coop</span> <small style="line-height:1em;">(consulté le <time class="nowrap" datetime="2023-04-27" data-sort-value="2023-04-27">27 avril 2023</time>)</small></span>.</span>

</li>

</ol></div>

</div>

<div class="mw-heading mw-heading2"><h2 id="Voir_aussi">Voir aussi</h2></div>

/* start https://fr.wikipedia.org/ */

.mw-parser-output .autres-projets>.titre{text-align:center;margin:0.2em 0}.mw-parser-output .autres-projets>ul{margin:0;padding:0}.mw-parser-output .autres-projets>ul>li{list-style:none;margin:0.2em 0;text-indent:0;padding-left:24px;min-height:20px;text-align:left;display:block}.mw-parser-output .autres-projets>ul>li>a{font-style:italic}@media(max-width:720px){.mw-parser-output .autres-projets{float:none}}

/* end https://fr.wikipedia.org/ */

</style>

<div class="mw-heading mw-heading3"><h3 id="Articles_connexes">Articles connexes</h3></div>

<ul><li><a href="Composants_web" title="Composants web">Composants web</a></li>

<li><a href="Conception_de_site_Web" class="mw-redirect" title="Conception de site Web">Conception de site Web</a></li>

<li><a href="D%C3%A9veloppement_web_frontal" title="Développement web frontal">Développement web frontal</a></li>

<li><a href="D%C3%A9veloppeur_web" title="Développeur web">Développeur web</a></li></ul>

<ul id="bandeau-portail" class="bandeau-portail"><li><span class="bandeau-portail-element"><span class="bandeau-portail-icone"><span class="noviewer" typeof="mw:File"></span></span> <span class="bandeau-portail-texte">Portail de la programmation informatique</span> </span></li> <li><span class="bandeau-portail-element"><span class="bandeau-portail-icone"><span class="noviewer" typeof="mw:File"></span></span> <span class="bandeau-portail-texte">Portail d’Internet</span> </span></li> </ul></div><div><div class="zim-footer">

Cet article est issu de <a class="external text" title="Dernière modification le 2025-05-06" href="https://fr.wikipedia.org/wiki/?title=Programmation_web&oldid=225430300">Wikipédia</a>. Sauf mention contraire, le texte est disponible sous <a class="external text" href="https://creativecommons.org/licenses/by-sa/4.0/deed.fr">Creative Commons Attribution-Share Alike 4.0</a>. Des conditions supplémentaires peuvent s’appliquer aux fichiers multimédias.

</div>

</div></div>

</div>

</main>

</div>

</body></html>